<!DOCTYPE html><html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>龙芯鸿蒙智能机器人中控云平台</title>
    <script>
      // 更新页面数据
      function updateData() {
        fetch("/data")
          .then(response => {
            if (!response.ok) throw new Error('网络错误');
            return response.json();
          })
          .then(data => {
            // 更新温度
            document.getElementById('temperature').innerText = data.temperature + "°C";
            document.getElementById('temp-bar').style.width = Math.min(data.temperature, 50) * 2 + "%";
            
            // 更新湿度
            document.getElementById('humidity').innerText = data.humidity + "%";
            document.getElementById('hum-bar').style.width = data.humidity + "%";
            
            // 更新甲烷浓度
            document.getElementById('methane').innerText = data.methane.toFixed(4) + "%";
            document.getElementById('meth-bar').style.width = Math.min(data.methane * 100, 100) + "%";
            
            // 更新危险级别
            const dangerText = ["安全", "低风险", "中风险", "高风险", "危险"];
            const dangerColors = ["#4CAF50", "#8BC34A", "#FFC107", "#FF9800", "#F44336"];
            const dangerLevel = Math.min(data.danger, 4);
            document.getElementById('danger').innerText = dangerText[dangerLevel];
            document.getElementById('danger').style.backgroundColor = dangerColors[dangerLevel];
            
            // 更新灯状态
            updateDeviceState('light', data.light);
            
            // 更新空调状态
            updateDeviceState('ac', data.ac);
            
            // 更新最后刷新时间
            document.getElementById('status').innerText = "最后更新: " + new Date().toLocaleTimeString();
          })
          .catch(error => {
            console.error('更新失败:', error);
            document.getElementById('status').innerText = "错误: " + error.message;
          });
      }
      
      // 更新设备状态显示
      function updateDeviceState(device, state) {
        const element = document.getElementById(device + '-state');
        const icon = document.getElementById(device + '-icon');
        
        element.innerText = state ? "开" : "关";
        element.style.color = state ? "#4CAF50" : "#F44336";
        
        // 更新图标样式
        if (device === 'light') {
          icon.innerText = state ? "💡" : "💡";
          icon.style.opacity = state ? "1" : "0.3";
        } else {
          icon.innerText = state ? "💡" : "💡";
          icon.style.opacity = state ? "1" : "0.3";
        }
      }
      
      // 启动自动更新
      setInterval(updateData, 1000);
      window.onload = updateData;
    </script>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      
      body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #1a2a6c, #2a3a7c, #1a2a6c);
        color: white;
        min-height: 100vh;
        padding: 20px;
      }
      
      .container {
        max-width: 1200px;
        margin: 0 auto;
      }
      
      header {
        text-align: center;
        padding: 20px 0;
        margin-bottom: 30px;
      }
      
      h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      }
      
      .subtitle {
        font-size: 1.2rem;
        opacity: 0.8;
      }
      
      .ip-info {
        background: rgba(255,255,255,0.1);
        padding: 10px;
        border-radius: 8px;
        margin: 15px 0;
        font-size: 0.9rem;
      }
      
      .dashboard {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
      }
      
      .card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
        border: 1px solid rgba(255,255,255,0.2);
        transition: transform 0.3s ease;
        height: 100%; /* 确保所有卡片高度一致 */
      }
      
      .card:hover {
        transform: translateY(-5px);
      }
      
      .card-title {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 1.3rem;
      }
      
      .card-title span {
        font-size: 2.2rem;
        margin-right: 15px;
        transition: opacity 0.3s;
      }
      
      .value {
        font-size: 3rem;
        font-weight: bold;
        text-align: center;
        margin: 20px 0;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      }
      
      .progress-container {
        background: rgba(0,0,0,0.2);
        height: 20px;
        border-radius: 10px;
        overflow: hidden;
        margin: 20px 0;
      }
      
      .progress-bar {
        height: 100%;
        border-radius: 10px;
        transition: width 0.5s ease;
      }
      
      #temp-bar { background: linear-gradient(90deg, #2196F3, #FF5722); }
      #hum-bar { background: linear-gradient(90deg, #03A9F4, #3F51B5); }
      #meth-bar { background: linear-gradient(90deg, #4CAF50, #FFC107, #F44336); }
      #pm25-bar { background: linear-gradient(90deg, #4CAF50, #FFC107, #F44336); } /* PM2.5进度条 */
      
      .danger-container {
        text-align: center;
        padding: 20px;
        border-radius: 12px;
        transition: all 0.5s ease;
      }
      
      #danger {
        font-size: 2.5rem;
        font-weight: bold;
        padding: 20px;
        border-radius: 12px;
        display: inline-block;
        min-width: 200px;
        transition: all 0.5s ease;
      }
      
      .device-panel {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
      
      .device-icon {
        font-size: 5rem;
        margin-bottom: 15px;
        transition: opacity 0.5s;
      }
      
      .device-state {
        font-size: 2.5rem;
        font-weight: bold;
        transition: color 0.5s;
      }
      
      .info {
        display: flex;
        justify-content: space-between;
        color: rgba(255,255,255,0.7);
        font-size: 0.9rem;
      }
      
      .status-bar {
        background: rgba(255,255,255,0.1);
        padding: 15px;
        border-radius: 8px;
        text-align: center;
        font-size: 0.9rem;
        margin-top: 20px;
      }
      
      /* 新增样式 */
      .battery-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      
      .battery-level {
        position: relative;
        width: 120px;
        height: 50px;
        border: 3px solid #fff;
        border-radius: 10px;
        margin: 20px 0;
        overflow: hidden;
      }
      
      .battery-fill {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: linear-gradient(90deg, #4CAF50, #8BC34A);
        transition: width 0.5s ease;
      }
      
      .battery-tip {
        position: absolute;
        top: 15px;
        right: -10px;
        width: 8px;
        height: 20px;
        background: #fff;
        border-radius: 0 3px 3px 0;
      }
      
      .battery-text {
        font-size: 1.8rem;
        font-weight: bold;
        margin-top: 10px;
      }
      
      .weather-container {
        text-align: center;
      }
      
      .weather-icon {
        font-size: 4rem;
        margin: 15px 0;
      }
      
      .weather-temp {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .weather-desc {
        font-size: 1.2rem;
        opacity: 0.9;
      }
      
      .weather-location {
        margin-top: 15px;
        font-size: 1rem;
        opacity: 0.7;
      }
      
      /* 新增卡片统一高度 */
      .schedule-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
      }
      
      .schedule-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
      
      .add-device-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
      
      @media (max-width: 768px) {
        .dashboard {
          grid-template-columns: 1fr;
        }
        
        h1 {
          font-size: 2rem;
        }
        
        .value, .device-state {
          font-size: 2.5rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>龙芯鸿蒙智能机器人中控云平台</h1>
        <div class="subtitle">实时监控环境参数与设备状态</div>
        <div class="ip-info">设备IP: )rawliteral" + WiFi.localIP().toString() + R"rawliteral(</div>
      </header>
      
      <div class="dashboard">
        <div class="card">
          <div class="card-title">
            <span>🌡️</span>
            <h2>温度</h2>
          </div>
          <div id="temperature" class="value">0.0°C</div>
          <div class="progress-container">
            <div id="temp-bar" class="progress-bar" style="width: 0%"></div>
          </div>
          <div class="info">
            <div>0°C</div>
            <div>25°C</div>
            <div>50°C</div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-title">
            <span>💧</span>
            <h2>湿度</h2>
          </div>
          <div id="humidity" class="value">0%</div>
          <div class="progress-container">
            <div id="hum-bar" class="progress-bar" style="width: 0%"></div>
          </div>
          <div class="info">
            <div>0%</div>
            <div>50%</div>
            <div>100%</div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-title">
            <span>🔥</span>
            <h2>甲烷浓度</h2>
          </div>
          <div id="methane" class="value">0.0000%</div>
          <div class="progress-container">
            <div id="meth-bar" class="progress-bar" style="width: 0%"></div>
          </div>
          <div class="info">
            <div>0%</div>
            <div>0.5%</div>
            <div>1.0%</div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-title">
            <span>🔋</span>
            <h2>电池电量</h2>
          </div>
          <div class="battery-container">
            <div class="battery-level">
              <div class="battery-fill" style="width: 75%"></div>
              <div class="battery-tip"></div>
            </div>
            <div class="battery-text">75%</div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-title">
            <span>🌀</span>
            <h2>风扇状态</h2>
          </div>
          <div class="device-panel">
            <div id="fan-icon" class="device-icon">💨</div>
            <div id="fan-state" class="device-state" style="color: #F44336">关</div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-title">
            <span>🌤️</span>
            <h2>天气预报</h2>
          </div>
          <div class="weather-container">
            <div class="weather-icon">☀️</div>
            <div class="weather-temp">32°C</div>
            <div class="weather-desc">晴朗</div>
            <div class="weather-location">当前位置</div>
          </div>
        </div>
        
        <div class="card">
          <div class="card-title">
            <span>⚠️</span>
            <h2>安全状态</h2>
          </div>
          <div class="danger-container">
            <div id="danger" style="background: #4CAF50">安全</div>
          </div>
          <div style="text-align: center; margin-top: 20px; color: rgba(255,255,255,0.7);">
            <div>0: 安全 | 1: 低风险 | 2: 中风险</div>
            <div>3: 高风险 | 4: 危险</div>
          </div>
        </div>
        
        <div class="card">
          <div class="device-panel">
            <div id="light-icon" class="device-icon">💡</div>
            <div class="card-title">
              <h2>客厅灯光状态</h2>
            </div>
            <div id="light-state" class="device-state" style="color: #F44336">关</div>
          </div>
        </div>
        
        <div class="card">
          <div class="device-panel">
            <div id="ac-icon" class="device-icon">💡</div>
            <div class="card-title">
              <h2>厨房灯光状态</h2>
            </div>
            <div id="ac-state" class="device-state" style="color: #F44336">关</div>
          </div>
        </div>
        
        <!-- 新增PM2.5卡片 - 高度宽度与原有卡片一致 -->
        <div class="card">
          <div class="card-title">
            <span>🌫️</span>
            <h2>PM2.5浓度</h2>
          </div>
          <div class="value">35.2μg/m³</div>
          <div class="progress-container">
            <div id="pm25-bar" class="progress-bar" style="width: 42%"></div>
          </div>
          <div class="info">
            <div>0</div>
            <div>50</div>
            <div>100</div>
          </div>
          <div style="text-align: center; margin-top: 10px; color: #FFC107;">
            中等污染
          </div>
        </div>
        
        <!-- 新增日程安排卡片 - 高度宽度与原有卡片一致 -->
        <div class="card">
          <div class="card-title">
            <span>📅</span>
            <h2>日程安排</h2>
          </div>
          <div style="padding: 15px;">
            <div class="schedule-item">
              <div style="font-weight: bold; color: #4CAF50;">2025.7.11</div>
              <div>收衣服</div>
            </div>
            <div class="schedule-item">
              <div style="font-weight: bold; color: #2196F3;">2025.7.12</div>
              <div>设备维护</div>
            </div>
            <div class="schedule-item">
              <div style="font-weight: bold; color: #FF9800;">2025.7.15</div>
              <div>更换传感器</div>
            </div>
          </div>
        </div>
        
        <!-- 新增添加设备卡片 - 高度宽度与原有卡片一致 -->
        <div class="card" style="cursor: pointer; background: rgba(255,255,255,0.05); border: 2px dashed rgba(255,255,255,0.3);">
          <div class="add-device-card">
            <div style="font-size: 4rem; margin-bottom: 15px; color: rgba(255,255,255,0.5);">➕</div>
            <h2 style="color: rgba(255,255,255,0.7);">添加新设备</h2>
          </div>
        </div>
      </div>
      
      <div class="status-bar">
        <div id="status">正在初始化...</div>
        <div style="margin-top: 5px; font-size: 0.8rem;">数据刷新频率: 1秒</div>
      </div>
    </div>
  </body>
  </html>